<template>
	<a-modal open title="翻倍处罚设置" class="doubble-punish-modal" :width="460" @cancel="emits('close')">
		<div class="content">
			<a-form ref="formRef" layout="vertical" :model="formState">
				<a-form-item label="时间期限" name="timeInterval" style="margin-bottom: 32px">
					<a-select v-model:value="formState.timeInterval" placeholder="请选择时间期限" style="width: 100%">
						<a-select-option :value="0">周</a-select-option>
						<a-select-option :value="1">月</a-select-option>
						<a-select-option :value="2">季度</a-select-option>
						<a-select-option :value="3">年</a-select-option>
					</a-select>
				</a-form-item>

				<a-form-item
					class="alarmCount-form-item"
					label="累计报警次数"
					name="alarmCount"
					style="margin-bottom: 32px"
					:rules="[{ required: true, message: '请输入累计报警次数', trigger: 'blur' }]"
				>
					<a-input-number v-model:value="formState.alarmCount" :step="1" :min="1" style="width: 100%"></a-input-number>
					<span style="display: flex; color: #b0b5c0; align-items: center">次</span>

					<a-tooltip class="alarmCount-form-item-tips">
						<template #title>同一人在规定时间内触发报警次数达到设定次数，罚款和计分将翻倍</template>
						<exclamation-circle-outlined></exclamation-circle-outlined>
					</a-tooltip>
				</a-form-item>
			</a-form>
		</div>

		<template #footer>
			<a-button key="back" @click="emits('close')">取消</a-button>
			<a-button key="submit" type="primary" :loading="loading" @click="handleOk">确认</a-button>
		</template>
	</a-modal>
</template>

<script setup lang="ts">
import httpServe from '@/global-services/index';
import { message } from 'ant-design-vue';

const emits = defineEmits(['close', 'ok']);

const formState = reactive<Record<string, any>>({
	timeInterval: 2, // 时间期限 0-周 1-月 2-季 3-年
	alarmCount: 2, // 报警次数
	type: 1 // 规则类型 1-翻倍处罚 2-连带规则
});

const loading = ref(false);
const isEdit = ref(false);
const getInfo = async () => {
	const res: TsRes = await httpServe.getHttp('/base/ruler/doubleliandaipunish/selectRuler?type=1')();
	if (res.code === 0) {
		if (!!res.data) {
			isEdit.value = true;
			formState.timeInterval = res.data.timeInterval;
			formState.alarmCount = res.data.alarmCount;
			formState.type = res.data.type;
			formState.id = res.data.id;
		}
	}
};

const handleOk = async () => {
	loading.value = true;
	const res: TsRes = await httpServe.postHttp('/base/ruler/doubleliandaipunish/saveRuler')(JSON.parse(JSON.stringify(formState)));
	loading.value = false;
	if (res.code === 0) {
		message.success('翻倍处罚设置设置成功');
		emits('close');
	}
};

onMounted(() => {
	getInfo();
});
</script>

<style lang="less">
.doubble-punish-modal {
	.ant-input,
	.ant-input-number {
		border: 1px solid @mask02 !important;
		color: @text01 !important;
		background-color: transparent !important;

		&::placeholder {
			color: @text04 !important;
		}
	}

	.ant-input-affix-wrapper {
		background-color: transparent !important;
	}

	.alarmCount-form-item {
		.ant-form-item-control-input-content {
			display: grid;
			grid-template-columns: 1fr max-content;
			grid-column-gap: 12px;
		}
	}

	.alarmCount-form-item-tips {
		position: absolute;
		top: -25px;
		left: 100px;
		z-index: 10;
		color: #b0b5c0;
	}

	.content {
		padding: 40px 40px 20px;
	}

	.bottom-group {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 32px;
		align-items: center;
	}
}
</style>
